<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 竞拍者注册页 </title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrap">
  <!-- main begin-->
      <div class="zclf login logns">
        <h1  class="blue">用户注册</h1>
          <dl>
            <%--${pageContext.request.contextPath}是获取的前面部分路径拼接后面的/do/register--%>
            <form action="${pageContext.request.contextPath}/do/register" method="post" id="registerForm">
              <dd class="form-group">
                <label> <small>*</small>用户名</label>
                <input type="text" class="inputh lf" value="" name="userName" required
                minlength="6" oninput="validateUsername(this)"/>
                <div class="lf red laba" style="display: none">用户名要求不低于6个字符</div>
              </dd>
              <dd class="form-group">
                <label> <small>*</small>密码</label>
                <input type="password" class="inputh lf" value="" name="userPassword" required
                       minlength="6" oninput="validatePassword(this)"/>
                <div class="lf red laba" style="display: none">密码要求不低于6个字符</div>
              </dd>
              <dd class="form-group">
                <label> <small>*</small>身份证号</label>
                <input type="text" class="inputh lf" value="" name="userCardNo" required />
                <div class="lf red laba" style="display: none">身份证号必填</div>
              </dd>
              <dd class="form-group">
                <label> <small>*</small>电话</label>
                <input type="text" class="inputh lf" value="" name="userTel" required />
                <div class="lf red laba" style="display: none">电话号码必填</div>
              </dd>
              <dd class="form-group">
                <label> <small>*</small>住址</label>
                <input type="text" class="inputh lf" value="" name="userAddress"/>
              </dd>
              <dd class="form-group">
                <label> <small>*</small>邮政编码</label>
                <input type="text" class="inputh lf" value="" name="userPostNumber"/>
              </dd>
              <dd class="hegas">
                <label> <small>*</small>验证码</label>
                <input type="text" class="inputh inputs lf" value="" />
                <span class="wordp lf"><img src="images/img2.jpg" width="96" height="27" alt="" /></span>
                <span class="blues lf"><a href="" title="">看不清</a></span>
              </dd>
              <dd class="hegas">
                <label>&nbsp;</label>
                <input name=""  type="checkbox" id="rem_u"   />
                <label for="rem_u" class="labels">我同意<span class="blues">《服务条款》</span></label>
              </dd>
              <dd class="hegas">
                <label>&nbsp;</label>
                <input name="" type="submit" value="立即注册" class="spbg buttombg buttombgs f14 lf" />
              </dd>
            </form>
          </dl>
    </div>
<!-- main end-->
<!-- footer begin-->

</div>
 <!--footer end-->
 
</div>
</body>
<script>
  // 用户名验证
  function validateUsername(input) {
    const errorMsg = input.nextElementSibling;
    if (input.value.length &lt; 6) {
      errorMsg.style.display = 'block';
    } else {
      errorMsg.style.display = 'none';
    }
  }

  // 密码验证
  function validatePassword(input) {
    const errorMsg = input.nextElementSibling;
    if (input.value.length &lt; 6) {
      errorMsg.style.display = 'block';
    } else {
      errorMsg.style.display = 'none';
    }
  }



  // 表单提交验证
  document.getElementById('registerForm').addEventListener('submit', function(e) {
    let isValid = true;

    // 检查所有必填字段
    document.querySelectorAll('[required]').forEach(input => {
      if (!input.value.trim()) {
        input.nextElementSibling.style.display = 'block';
        isValid = false;
      }
    });

    if (!isValid) {
      e.preventDefault(); // 阻止表单提交
    }
  });
</script>
</html>
